<template>
  <div>
    <context-holder />
    <!-- <a-button type="primary" @click="showModal">Open Modal</a-button> -->
    <a-modal v-model:open="open" title="Sign in">
      <a-form
        :model="userFrom"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="Username"
          name="userAccount"
          :rules="[{ required: true, message: 'Please input your username!' }]"
        >
          <a-input v-model:value="userFrom.userAccount">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          label="Password"
          name="userPassword"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="userFrom.userPassword">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-form-item name="remember" no-style>
            <a-checkbox v-model:checked="formState.remember"
              >Remember me</a-checkbox
            >
          </a-form-item>
          <a class="login-form-forgot" href="">Forgot password</a>
        </a-form-item>

        <a-form-item>
          <a-button
            :disabled="disabled"
            type="primary"
            html-type="submit"
            class="login-form-button"
            @click="userSignIn"
          >
            Log in
          </a-button>
          Or
          <a @click="toRegister">register now!</a>
        </a-form-item>
      </a-form>
      <register ref="RefRegister" />
    </a-modal>
  </div>
</template>
<script lang="ts">
import { reactive, computed } from "vue";
import { defineComponent, ref } from "vue";
import register from "./register.vue";
import { UserControllerService, UserLoginRequest } from "../../../generated";
import { userStore } from "@/stores/user";
import { message } from "ant-design-vue";
import Cookies from "js-cookie";
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();

const [messageApi, contextHolder] = message.useMessage(); //全局提示框
export default defineComponent({
  components: { register },
  setup() {
    const userInfo = userStore();
    const open = ref(false);
    const showModal = () => {
      open.value = true;
    };
    const RefRegister = ref();
    const toRegister = () => {
      open.value = false;
      setTimeout(() => {
        RefRegister.value.showModal();
      }, 500);
    };
    const handleOk = (e: Object) => {
      console.log(e);
      open.value = false;
    };
    const formState = reactive({
      username: "",
      password: "",
      remember: true,
    });
    const onFinish = (values: Object) => {
      console.log("Success:", values);
    };
    const onFinishFailed = (errorInfo: Object) => {
      console.log("Failed:", errorInfo);
    };
    const disabled = computed(() => {
      return !(userFrom.userAccount && userFrom.userPassword);
    });
    const userFrom = reactive({
      userAccount: "",
      userPassword: "",
    } as UserLoginRequest);
    const userSignIn = async () => {
      const res = await UserControllerService.userLoginUsingPost(userFrom);
      if (res.code === 0) {
        const data = res.data;
        const { setUserInfo } = userInfo;
        setUserInfo(data);
        message.success("登录成功", 1);
        open.value = false;
        cookies.set("k2", "v2");
        // console.log(cookies.get("SESSION"));
        // console.log(cookies.get("k2"));
        // const resAuto = await UserControllerService.getLoginUserUsingGet();
        // if (resAuto.code === 0) {
        //   alert("查询到用户已登录过");
        // } else {
        //   alert("用户未登录过");
        // }
      } else {
        alert("登录失败");
        console.log(res);
      }
    };
    return {
      showModal,
      handleOk,
      onFinish,
      onFinishFailed,
      disabled,
      formState,
      open,
      toRegister,
      RefRegister,
      userSignIn,
      userFrom,
    };
  },
});
</script>
